<template>
  <div class="voucher" :style="{'height':bodyHeight+'px'}">
    <img src="../../assets/navBar.png" alt="" width="10" style="transform: rotate(180deg);margin-top: 10px;margin-left: 10px;"
      @click="goBack">
    <!-- <div style="color:#d5bd7f;padding-top: 170px;">
      <div style="font-size: 18px;">乘月相赠、送完为止</div>
      <div style="font-size: 15px;">
        活动时间:9/21-9/24
      </div>
    </div>
    <div style="padding: 5px;margin-top: 190px;position: relative;">
      <div style="color: #ef250f;position: absolute;top: 20px;font-size: 30px;left: 27%;top: 75px">100</div>
      <div style="color: #fff;font-size: 12px;position: absolute;top: 110px;">立即领取</div>
      <img src="../../assets/voucherT.png" alt="" width="100%">
    </div> -->
    <div style="width: 100px;background: #fff;height: 100px;position: absolute;top: 61%;left: 22%;opacity: 0;z-index: 9999999;"
      v-for="packet in packetList" @click="getReceiver(packet)"></div>
  </div>
</template>
<script>
  import tips from '../../service/tips.js';
  import util from '../../service/util.js'
  export default {
    data() {
      return {
        bodyHeight: "",
        packetList: [],
        username: "",
      }
    },
    mounted() {
      this.bodyHeight = document.documentElement.clientHeight;
      this.username = this.$route.query.username || util.getItem('login.username');
      if (!this.username) {
        this.$router.push({ path: '/login' })
        return false
      }
      this.getVoucher();
    },
    methods: {
      goBack() {
        history.back();
      },
      getVoucher() {
        this.http.get("/user/activitys/packet?id=packet&username=" + this.username).then(res => {
          if (res.data.status == 200) {
            this.packetList = res.data.body;
          }
        })
      },
      getReceiver(packet) {

        this.http.put("/user/packet", {
          type: packet.type,
          username: this.username,
        }).then(res => {
          tips.tips(res.data.msg)
        }).catch(res => {
          tips.tips(res.data.msg)
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .voucher {
    background-image: url('../../assets/voucherBg.jpg');
    background-size: 100% 100%;
    /* height: 800px; */
  }
</style>